import React from 'react';

import { View, StyleSheet, Text } from 'react-native';
import theme from '../native-base-theme/variables';
import ZlstIcon from './zlst-icons';

export default ({ name, iconName, iconClick }) => (
  <View style={styles.itemContainer}>
    <Text style={styles.fontStyle}>{name}</Text>
    {iconName && (
    <ZlstIcon
      onPress={() => iconClick()}
      name={iconName}
      size={24}
      color="white"
    />
    )}
  </View>
);

const styles = StyleSheet.create({
  itemContainer: {
    padding: 5,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  fontStyle: {
    color: 'white',
    fontSize: theme.myNormalFontSize,
  },
});
